<template>
  <el-drawer
    :title="title"
    size="auto"
    :wrapperClosable="false"
    :visible.sync="isShow"
    direction="rtl"
    class="drawer-form"
    @close="closeDrawer"
    >
    <div class="drawer-body">
      <el-scrollbar style="height:100%">
        <el-form size="small">
          <el-row :gutter="20">
            <el-col :xs="24">
            <el-form-item label="用户ID(唯一)：" required>
              <el-input v-model="form.user_id" placeholder="请输入" :disabled="type == 'edit'"  />
            </el-form-item>
            </el-col>
            <el-col :xs="24">
            <el-form-item label="用户名：" required >
              <el-input v-model="form.user_name" placeholder="请输入"/>
            </el-form-item>
            </el-col>
            <el-col :xs="24">
            <el-form-item label="用户密码：" :required="type=='add'">
              <el-input v-model="form.user_pwd" placeholder="请输入" :type="passwordType" autocomplete="new-password">
                <i slot="suffix" class="el-icon-view el-input__icon cursor" @click="showPassword" >
                  <span v-show="passwordType != 'password'">/</span>
                </i>
              </el-input>
            </el-form-item>
            </el-col>
            <el-col :xs="24">
            <el-form-item label="确认密码：" :required="type=='add'">
              <el-input v-model="form.user_repwd" placeholder="请输入" :type="passwordType" autocomplete="new-password">
                <i slot="suffix" class="el-icon-view el-input__icon cursor" @click="showPassword" >
                  <span v-show="passwordType != 'password'">/</span>
                </i>
              </el-input>
            </el-form-item>
            </el-col>
            <el-col :xs="24">
            <el-form-item label="所属部门：">
              <el-input v-model="form.user_dept" placeholder="请输入" />
            </el-form-item>
            </el-col>
            <el-col :xs="24">
            <el-form-item label="所属行政区划：" required>
              <el-select v-model="form.region_code" placeholder="请选择" style="width:100%">
                <el-option v-for="(item,index) in initData.countys" :key="index" :value="item.name" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8">
            <el-form-item label="是否为区县用户：">
              <el-radio-group v-model="form.is_region_user">
                <el-radio :label="false">否</el-radio>
                <el-radio :label="true">是</el-radio>
              </el-radio-group>
            </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8">
            <el-form-item label="是否为地市管理员：">
              <el-radio-group v-model="form.is_region_admin">
                <el-radio :label="false">否</el-radio>
                <el-radio :label="true">是</el-radio>
              </el-radio-group>
            </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8">
            <el-form-item label="是否已锁定：">
              <el-radio-group v-model="form.disabled">
                <el-radio :label="false">否</el-radio>
                <el-radio :label="true">是</el-radio>
              </el-radio-group>
            </el-form-item>
            </el-col>
            <el-col :xs="24">
            <el-form-item label="备注：">
              <el-input v-model="form.memo" placeholder="请输入" type="textarea" />
            </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>
    </div>
    <div class="btn-group align-center p-a-14">
      <el-button size="small" @click="isShow = false">{{type == 'view' ? '关闭' : '取消'}}</el-button>
      <el-button :loading="btnLoading" size="small" type="primary" @click="submitForm">保存</el-button>
    </div>
  </el-drawer>
</template>
<script>
import {city} from '@/config/env';
export default {
  data(){
    return{
      isShow: false,
      btnLoading: false,
      title: null,
      type: null,
      row: null,
      form:{
        user_id: null,
        user_name: null,
        user_dept:undefined,
        user_pwd: null,
        user_repwd: null,
        disabled: false,
        is_region_admin: false,
        is_region_user: false,
        memo: undefined,
        region_code: undefined,
      },
      defaultForm: {},
      passwordType: "password",
      initData:{
        countys: [
          {name: '珠海市', value: ''},
          {name: '香洲区', value: ''},
          {name: '金湾区', value: ''},
          {name: '斗门区', value: ''},
          {name: '高新区', value: ''},
          {name: '鹤洲新区', value: ''},
          {name: '横琴粤澳深度合作区', value: ''}
        ],
      }
    }
  },
  created(){
    this.defaultForm = JSON.parse(JSON.stringify(this.form));
  },
  methods:{
    init(type,row){
      this.type = type;
      this.row = row;
      this.form.region_code = city;
      console.log(row);
      if(type == 'edit'){
        this.title = '编辑用户信息';
        this.$util.resetForm(this.form, row);
      }else{
        this.title = '新增用户';
      }
      this.isShow = true;
    },
    closeDrawer(){
      this.$util.resetForm(this.form,this.defaultForm);
    },
    showPassword() {
      this.passwordType === ""
        ? (this.passwordType = "password")
        : (this.passwordType = "");
    },
    verifyForm(){
      if(!this.$verify.null(this.form.user_id, '请输入用户ID')){
        return false
      }
      if(!this.$verify.null(this.form.user_name, '请输入用户名')){
        return false;
      }
      if(!this.$verify.null(this.form.region_code, '请选择所属的行政区划')){
        return false;
      }
      if(this.type == 'add'){
        if(!this.checkPwd()){
          return false;
        }
      }else{
        if(this.form.user_pwd){
          if(!this.checkPwd()){
            return false;
          }
        }
      }

      return true;
    },
    checkPwd(){
      let reg = /^(?![A-Za-z]+$)(?![A-Z\d]+$)(?![A-Z\W]+$)(?![a-z\d]+$)(?![a-z\W]+$)(?![\d\W]+$)\S{8,20}$/;
      if (!reg.test(this.form.user_pwd)) {
        this.$message.warning('密码长度不得低于8位，由大小写字母、数字组成！');
        return false;
      }
      if(this.form.user_pwd != this.form.user_repwd){
        this.$message.warning('两次输入的密码不一致！');
        return false;
      }
      return true
    },
    submitForm(){
      if(!this.verifyForm()){
        return;
      }
      let params = JSON.parse(JSON.stringify(this.form));
      if(this.type == 'edit' && !this.form.user_pwd){
        delete params.user_pwd;
        delete params.user_repwd;
      }
      let newParams = this.$util.filterNull(params);
      this.btnLoading = true;
      this.$request('post', '/user/mod_add_user'+this.$util.serialize(newParams), {}, (data,msg) => {
        this.btnLoading = false;
        this.isShow = false;
        this.$emit('confirm');
      })
    }
  }
}
</script>